<%@ include file="include.jsp" %>
		<style>  
             .form-item { margin: 20px 0; }  
             .form-label { font-weight: bold; }  
             .form-error-field { background-color: FFC; }  
             .form-error-message { font-weight: bold; color: 900; }  
         </style>  

<!-- start page -->
<div id="page"><!-- start content -->
<div id="content">
<div class="post">
<h1 class="title">Create An Account With Us</h1>
<div class="entry">
Please enter the following information:<br/>
<hr style="width: 100%; height: 2px;"><br/>
<form:form action="createCustomerConfirm.html" modelAttribute="newCustomer">
     <div class="form-item">  
         <div class="form-label">Your Username:</div>  
         <form:input path="username" size="40" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="username"/></div>  
     </div>
      <div class="form-item">  
         <div class="form-label">Your Password:</div>  
         <form:input path="password" size="40" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="password"/></div>  
     </div>
     <div class="form-item">  
         <div class="form-label">Your name:</div>  
         <form:input path="name" size="40" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="name"/></div>  
     </div>
     <div class="form-item">  
         <div class="form-label">Your Company:</div>  
         <form:input path="name2" size="40" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="name2"/></div>  
     </div>
     <div class="form-item">  
         <div class="form-label">Street Address:</div>  
         <form:input path="address1" size="40" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="address1"/></div>  
     </div>
     <div class="form-item">  
         <div class="form-label">Secondary Address:</div>  
         <form:input path="address2" size="40" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="address2"/></div>  
     </div>
     <div class="form-item">  
         <div class="form-label">City:</div>  
         <form:input path="city" size="40" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="city"/></div>  
     </div>
     <div class="form-item">  
         <div class="form-label">State:</div>          
         	<SELECT name=state> 
					<c:forEach var="state" items="${stateList}">
					<OPTION value=${state.abbreviation}>${state.name} - ${state.abbreviation}</OPTION> 
					</c:forEach>
			</SELECT>
         <div class="form-error-message"><form:errors path="state"/></div>  
     </div>
     <div class="form-item">  
         <div class="form-label">Zip:</div>  
         <form:input path="zip" size="20" maxlength="5" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="zip"/></div>  
     </div>
     <div class="form-item">  
         <div class="form-label">Email:</div>  
         <form:input path="email" size="40" maxlength="100" cssErrorClass="form-error-field"/>  
         <div class="form-error-message"><form:errors path="email"/></div>  
     </div>

<div class="form-item">
<c:if test='${not empty newCustomer.phoneNumberList}'>
   
      <c:forEach var="phoneNumber" items="${newCustomer.phoneNumberList}" varStatus="status">
         Phone Number:
         <form:input path="phoneNumberList[${status.index}].areaCode"  size="3" maxlength="3"/>
         <form:input path="phoneNumberList[${status.index}].exchange" size="3" maxlength="3"/>
         <form:input path="phoneNumberList[${status.index}].lineNumber"  size="4" maxlength="4"/>
         extension: <form:input path="phoneNumberList[${status.index}].extension"  size="10" maxlength="10"/>
          <br/>
 	     Phone Type: 
 	     <form:select path="phoneNumberList[${status.index}].phoneType">
			<c:forEach items="${phoneTypeList}" var="phoneType">
			   <form:option value="${phoneType}" label="${phoneType}"/>
			</c:forEach>
		 </form:select>
      </c:forEach>
</c:if>

 <input type="submit" name="submit" value="Add Phone Number">
<br/><br/>
<hr style="width: 100%; height: 2px;"><br>
</div>
<div class="form-item">  
         <input type="submit" name="submit" value="Submit" />  
     </div>  
</form:form><br>





</div>
<div class="meta">
<p class="byline"><br />
</p>
<p class="links">&nbsp;<b>|</b>&nbsp;</p>
</div>
</div>
</div>
<!-- end content --><!-- start side bar -->
<div id="sidebar">
    
<img src="images/KC_Ext_RS.jpg"> 
    
</div>
<!-- end sidebar -->

<div style="clear: both;"></div>
</div>



